import { Select } from 'antd';
import React, { useMemo } from 'react';
import { useContextSelector } from 'use-context-selector';

import { WorkflowContext } from '../../../../../context';

import type { RenderInputProps } from '../type';

const SelectRender = ({ item, nodeId }: RenderInputProps) => {
  const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);

  const Render = useMemo(() => {
    return (
      <Select
        className="nowheel"
        popupClassName="workflow-dropdown"
        style={{ width: '100%' }}
        value={item.value}
        options={item.list || []}
        onChange={(e) => {
          onChangeNode({
            nodeId,
            type: 'updateInput',
            key: item.key,
            value: {
              ...item,
              value: e,
            },
          });
        }}
      />
    );
  }, [item, nodeId, onChangeNode]);

  return Render;
};

export default React.memo(SelectRender);
